<template>
  <div>
    <div style="float:left;">
      <el-button size="small" @click="shangchuan">上报</el-button>
    </div>
    <!-- {{obj}} -->
    <div style="float:right;">
      <el-input v-model="obj.province" size="small" placeholder="内容"></el-input>
    </div>
    <!-- {{datalist}} -->
    <el-table :data="datalist.list" stripe style="width: 100%">
      <el-table-column align="center" prop="id" label="编号"></el-table-column>
      <el-table-column align="center" prop="country" label="国家"></el-table-column>
      <el-table-column align="center" prop="province" label="省份"></el-table-column>
      <el-table-column align="center" prop="city" label="市"></el-table-column>
      <el-table-column align="center" prop="area" label="区"></el-table-column>
      <el-table-column align="center" prop="confirmed" label="现有确诊"></el-table-column>
      <el-table-column align="center" prop="suspected" label="疑似"></el-table-column>
      <el-table-column align="center" prop="dead" label="死亡">
        <template v-slot="scope">
          <el-tag type="danger">{{scope.row.dead}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="cure" label="治愈">
        <template v-slot="scope">
          <el-tag type="success">{{scope.row.cure}}</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="severe" label="累计确诊"></el-table-column>
      <el-table-column align="center" prop="outside" label="境外输入"></el-table-column>
      <el-table-column fixed="right" align="center" prop="inputTime" label="录入时间" width="180">
        <template v-slot="scope">
          <div>{{scope.row.inputTime | dateFMT}}</div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="datalist.total"
      :page-size="obj.pageSize"
      :current-page="obj.page"
      @current-change="change_page"
    ></el-pagination>
  </div>
</template>

<script>
// import moment from "moment";
import axios from "../../http/axios";

import { mapState, mapActions } from "vuex";
export default {
  //     //过滤器 就近原则
  //   filter: {
  //     dateFMT(str) {
  //       return moment(str).format("YYYY-MM-DD HH:mm:ss");
  //     }
  //   },

  computed: {
    //js文件里面的page_query数据

    ...mapState("datalist", ["datalist"])
  },
  //监听器
  watch: {
    obj: {
      handler: function() {
        this.page_query(this.obj);
        //   console.log(this.obj);
      },
      deep: true
    }
  },
  data() {
    return {
      obj: {
        page: 1,
        pageSize: 4
      },
      total: 0
    };
  },
  created() {
    // axios.defaults.baseURL = 'http://39.102.37.84:8001'

    this.page_query(this.obj);
  },
  methods: {
    //辅助函数,帮助我们快速获取状态机中的变量或者方法
    //js文件里面的page_query方法
    ...mapActions("datalist", ["page_query"]),
    change_page(val) {
      // console.log(val);
      this.obj.page = val;
    },
    shangchuan() {
      this.$router.push({
        path: "/datalist/updata"
      });
    }
  }
};
</script>